import { List, Input } from "antd"
import { useState, useDeferredValue } from "react"
import mockjs from "mockjs"

interface Item {
  id: number;
  name: string;
  address: string;
}
export default function Demo05() {
  const [keyword, setKeyword] = useState('')
  const deferredKeyword = useDeferredValue(keyword)
  const [list] = useState<Item[]>(() => (mockjs.mock({
    "list|3000": [
      {
        "id|+1": 1,
        name: '@natural',
        address: "@county(true)",
      },
    ],
  })).list)
  const isStale = keyword !== deferredKeyword
  const filterList = () => {
    console.log(keyword, '-------', deferredKeyword)
    return list.filter((item) => item.name.toString().includes(deferredKeyword))
  }
  return <>
    <h1>useDeferredValue示例</h1>
    <Input placeholder="请输入关键字" value={keyword} onChange={e => setKeyword(e.target.value)} />
    <List
      style={{opacity: isStale ? '0.2' : '1', transition: 'all 1s'}}
      dataSource={filterList()}
      renderItem={(item) => (
        <List.Item key={item.id}>
          <List.Item.Meta title={item.name} description={item.address} />
        </List.Item>
      )}
    />
  </>
}